<template>
    <div class="echarts" :id="id" v-if="option">

    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "index",
        data(){
            return{
                myChart:{}
            }
        },
        props:{
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            setTimeout(()=>{
                this.myChart = echarts.init(document.getElementById(this.id));
                let option = this.option
                this.myChart.setOption(option);
                window.addEventListener('resize',() =>{
                    this.myChart.resize()
                });
                this.$emit('myChart',this.myChart)
            },100)
        }
    }
</script>

<style scoped>
    .echarts {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }
</style>
